<template>
    <div class="channel">
        <van-tabs v-model:active="active" @click-tab="onClickTab">
            <van-tab v-for="item in brotherCategoryArr" :title="item.name">
                <h3>{{ currentCategory?.name }}</h3>
                <h4>{{ currentCategory?.front_desc }}</h4>
                <ul class='goodlistbox'>
                    <li v-for="item in goodslistArr" :key="item.id">
                        <img :src="item.list_pic_url" alt="">
                        <p>{{ item.name }}</p>
                        <p>{{ item.retail_price }}</p>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
// 导入接口
import { getchannelData, getgoodslist } from '@/api/channel'
// 获取路由参数
const route = useRoute();
// console.log('route', route.params.id);
const active = ref(0);
// 定义当前分类的id
const id = ref('');
id.value = (route.params.id) as string;

// 点击切换分类
const onClickTab = (name: any) => {
    // console.log(name);
    // 根据name 中title 字段 来匹配获取当前所有分类中title 为对应的id
    const currentObj: any = brotherCategoryArr.value.find(item => {
        return item.name == name.title
    })
    // console.log('currentObj', currentObj.id);
    // 给当前的id赋值
    id.value = currentObj.id
    // 重新请求当前分类id 对应的数据
    getcurrentdata();
    // 获取当前h3和h4标签内容
    // console.log(brotherCategoryArr.value);
    let currentcategory = ((brotherCategoryArr.value) as any).find((item: any) => {
        return item.name == name.title
    })
    // console.log('currentcategory', currentcategory);
    currentCategory.value = currentcategory

}

// 定义分类菜单数据
const brotherCategoryArr = ref<Array<{
    id: number,
    name: string
}>>([]);

const currentCategory = ref<{
    front_desc: string,
    name: string
}>()

// 获取所有分类菜单数据
getchannelData({
    id: id.value // 获取的路由传递参数
}).then(res => {
    // console.log(res);
    if (res.data.errno == 0) {
        brotherCategoryArr.value = res.data.data.brotherCategory
        // console.log('brotherCategoryArr.value', brotherCategoryArr.value);
        currentCategory.value = res.data.data.currentCategory
        // console.log('currentCategory', currentCategory.value);
        // 根据路由参数 route中的id , 来判断显示先一个分类的下标
        brotherCategoryArr.value.forEach((item, index) => {
            if (String(item.id) == id.value) {
                active.value = index
            }
        })
    }
})

// 获取当前分类对应的数据
const goodslistArr = ref<Array<{
    id: number,
    list_pic_url: string,
    name: string,
    retail_price: number
}>>([]);

//  获取当前分类数据
const getcurrentdata = () => {
    getgoodslist({
        categoryId: id.value,
        page: 1,
        size: 20
    }).then(res => {
        //console.log('res', res);
        if (res.data.errno == 0) {
            goodslistArr.value = res.data.data.goodsList
        }
    })
}
// 初始化执行
getcurrentdata()

</script>
<style scoped lang="scss">
.channel {

    h3,
    h4 {
        text-align: center;
    }

    .goodlistbox {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;


        li {
            width: 50%;

            img {
                width: 100%
            }

            p {
                text-align: center;
            }
        }
    }
}
</style>